<script setup>

import {Calendar, Delete, Edit, Message, Search} from "@element-plus/icons-vue";
import {reactive} from "vue";
const data=reactive({
  input:null
})
</script>

<template>
  <div>
    <el-button>Default</el-button>
    <el-button type="primary" size="large">Primary</el-button>
    <el-button type="success" circle>Success</el-button>
    <el-button type="info" loading>Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
  <div style="margin: 30px">
    <el-icon :size="90">
      <Edit/>
    </el-icon>
    <el-icon :size="90">
      <Delete/>
    </el-icon>
    <el-icon :size="90">
      <Message />
    </el-icon>
<!--  结合el-botton-->
    <el-button type="primary" :icon="Edit" circle></el-button>
    <el-button type="primary" :icon="Delete" circle></el-button>
  </div>
<!--  el-input输入框-->
  <div style="margin: 30px">
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" :prefix-icon="Search"/>{{data.input}}
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" :suffix-icon="Calendar"/>{{data.input}}
    <el-input v-model="data.input" style="width: 240px" placeholder="请输入内容" :prefix-icon="Search" :suffix-icon="Calendar"/>{{data.input}}
    <el-input  v-model="data.input" style="width: 240px" placeholder="请输入内容" :prefix-icon="Search" :suffix-icon="Calendar" clearable/>{{data.input}}
  </div>
  <select>
    <option>选项1</option>
    <option>选项2</option>
  </select>
  </template>

<style scoped>

</style>